<template>
  <div>
    <div class="robot" :style="{ bottom: robotBottom }">
      <el-popover
        placement="bottom"
        trigger="manual"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        v-model="robotVisible"
      >
        <ChatBot
          :dataList="chatBotData"
          :robotBottom="robotBottom"
          @handleClose="handleClose"
          @handleMini="hanldeMini"
          @handleBig="handleBig"
        />
      </el-popover>
    </div>
    <div v-if="isPageShow" class="wrap">
      <!-- header头部 -->
      <!-- <m-header :activeIndex="0"></m-header> -->
      <!-- banner图 -->

     <!-- <div class="banner-wrap">
        <img class="banner" src="../../assets/images/banner.png" />
      </div> -->
	    <div class="swiper-container">
	      <div class="swiper-wrapper">
	        <div class="swiper-slide" v-for="(slide, index) in slides" :key="index">
	          <img :src="slide.image">
	        </div>
	      </div>
	      <!-- 分页器 -->
	      <div class="swiper-pagination"></div>
	      <!-- 导航按钮 -->
	    <!--  <div class="swiper-button-next"></div>
	      <div class="swiper-button-prev"></div> -->
	    </div>
      <div class="container" style="max-width: 1200px; width: 100%">
        <!-- content内容部分 -->
        <div class="course-wrap">
          <div
            class="container"
            ref="containerbox"
            style="max-width: 1200px; width: 100%"
            v-for="item in homeData"
            :key="item.id"
          >
            <div v-if="item.resourceList.length >= 1">
              <el-row :gutter="40">
                <!-- <m-block-title
                  :type="item.name"
                  class="b-title"
                  :title="item.name"
                  :content="item"
                  :more="item.resourceList.length < 1 ? '' : '更多'"
                  gourl="/eventresources"
                ></m-block-title> -->
				<m-block-title
				  :type="item.name"
				  class="b-title"
				  :title="item.name"
				  :more="item.resourceList.length < 1 ? '' : '更多'"
				  gourl="/eventresources"
				></m-block-title>
                <el-col
                  class="nowrap"
                  :sm="6"
                  v-if="item.resourceList.length == 0"
                >
                  <el-empty :image-size="200"></el-empty>
                </el-col>
                <el-col
                  class="search-wrap"
                  :sm="6"
                  v-for="smallitem in item.resourceList"
                  :key="smallitem.id"
                >
                  <div
                    class="detail-box"
                    @click="handleGoUrl(smallitem, item.name)"
                  >
                    <div class="box-img">
                      <el-image
                        lazy
                        v-if="item.name == '赛项资源'"
                        style="width: 100%; height: 100%"
                        :src="smallitem.img != '' ? smallitem.img : sxzymorImg"
                      ></el-image>
                      <el-image
                        lazy
                        v-if="item.name == '技能培训'"
                        style="width: 100%; height: 100%"
                        :src="smallitem.img != '' ? smallitem.img : jnpxmorImg"
                      ></el-image>
                      <el-image
                        lazy
                        v-if="item.name == '1+X证书资源'"
                        style="width: 100%; height: 100%"
                        :src="smallitem.img != '' ? smallitem.img : xbookmorImg"
                      ></el-image>
                      <el-image
                        lazy
                        v-if="item.name == '金职大讲堂'"
                        style="width: 100%; height: 100%"
                        :src="smallitem.img != '' ? smallitem.img : jzdjtmorImg"
                      ></el-image>
                      <el-image
                        lazy
                        v-if="item.name == '行业资源'"
                        style="width: 100%; height: 100%"
                        :src="smallitem.img"
                      ></el-image>
                    </div>
                    <div class="box-content">
                      <div class="title">
                        {{ smallitem.eventName }}
                      </div>
                      <div class="sign">
                        <span class="pe-num">{{
                          `${smallitem.numStus ? smallitem.numStus : 0}人学习`
                        }}</span>
                        <span class="date">{{
                          smallitem.createTime.split(" ")[0]
                        }}</span>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <!-- 右侧悬浮栏组件 -->
         <m-right-fiexd-box
            v-if="isWideScreen"
            @handleIsShow="handleIsShow"
            @handleBig="handleBig"
          />
          <!-- 左侧悬浮栏组件 -->
          <!-- <m-left-fiexd-box v-if="isWideScreen" /> -->
        </div>
      </div>
      <!-- footer页脚 -->
      <!-- <m-fotter /> -->
    </div>
  </div>
</template>

<script>
import sxzymorImg from "../../assets/images/sxzy.png";
import jzdjtmorImg from "../../assets/images/jzdjt-mor.png";
import xbookmorImg from "../../assets/images/xbook.png";
import jnpxmorImg from "../../assets/images/jnpx.png";
import { STATUS_CODE_OK } from "@/config";
import MBlockTitle from "@/components/MBlockTitle.vue";
// import MLeftFiexdBox from "@/components/MLeftFiexdBox.vue";
import MRightFiexdBox from "@/components/MRightFiexdBox.vue";
import ChatBot from "@/components/Chatbot.vue";
import {
  getResourceList,
  permissionVerification,
  // robotAnswerList,
  // getTitleList,
} from "@/api/homePage.js";
import state from "@/store/state";
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: "HomePage",
  data() {
    return {
      robotBottom: "10px",
      chatBotData: [],
      robotVisible: false,
      isWideScreen: false, // 控制组件显示隐藏
      sxzymorImg,
      jzdjtmorImg,
      xbookmorImg,
      jnpxmorImg,
      isPageShow: false, //页面是否显示
      homeData: [],
	  slides: [
		  {
			image: require('../../assets/images/banner.png'),
		  },
		  {
			image: require('../../assets/images/banner.png'),
		  },
		  {
			image: require('../../assets/images/banner.png'),
		  }
		]
    };
  },
  async created() {
    // await this.handleGetTitleList();
    await this.handleGetResourceList();
    // await this.handleRobotAnswer()
	this.initSwiper()
  },
  mounted() {
    this.updateScreenWidth();
    window.addEventListener("resize", this.updateScreenWidth);
	
	
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScreenWidth);
  },
  methods: {
	  initSwiper() {
		new Swiper('.swiper-container', {
		  loop: true, // 循环模式
		  autoplay: {
			delay: 5000, // 自动播放间隔
			disableOnInteraction: false // 用户操作后是否停止自动播放
		  },
		  pagination: {
			el: '.swiper-pagination',
			clickable: true // 分页器可点击
		  },
		 //  navigation: {
			// nextEl: '.swiper-button-next',
			// prevEl: '.swiper-button-prev'
		 //  }
		})
	  },
    // async handleRobotAnswer() {
    //   let { data } = await robotAnswerList();
    //   if (data.code == STATUS_CODE_OK) {
    //     this.chatBotData = data.data;
    //   }
    // },
    // 关闭弹窗通信
    handleIsShow(prop) {
      this.robotVisible = prop;
    },
    handleClose(prop) {
      console.log(prop, "handleClose");
      this.robotVisible = prop;
    },
    hanldeMini(prop) {
      this.robotBottom = prop;
    },
    handleBig(prop) {
      this.robotBottom = prop;
    },
    updateScreenWidth() {
      this.isWideScreen = window.innerWidth > 1700;
      // if (window.innerWidth < 1200) {
      //   const containers = this.$refs.containerbox;
      //   console.log(this.$refs.containerbox);
      //   containers.forEach((container) => {
      //     container.style.width = window.innerWidth; // 这里替换为实际的宽度值，例如 '200px'
      //   });
      // }
    },
    preventContextMenu(event) {
      event.preventDefault();
    },
    // async handleGetTitleList() {
    //   let { data } = await getTitleList();
    //   if (data.code == STATUS_CODE_OK) {
    //     console.log(data.data);
    //   }
    // },
    async hanldePermissionVerification(item, name) {
      let { data } = await permissionVerification({
        allocationId: item.id,
      });
      if (data.code == STATUS_CODE_OK) {
        if (data.success) {
          // 判断资源类型跳转页面
          if (name == "赛项资源") {
            this.$router.push({
              name: "resourcesDetails",
              params: { row: item },
            });
            return false;
          }
          if (name == "技能培训") {
            this.$router.push({
              name: "skills",
              params: { row: item },
            });
            return false;
          }
          if (name == "1+X证书资源") {
            this.$router.push({
              name: "oneXbook",
              params: { row: item },
            });
            return false;
          }
          if (name == "金职大讲堂") {
            this.$router.push({
              name: "course",
              params: { row: item },
            });
            return false;
          }
        } else {
          this.$notify.warning({
            title: "提示",
            message: "暂无浏览权限,请联系管理员",
          });
          return;
        }
      }
    },
    handleGoUrl(item, name) {
      if (!state.userData.id) {
        this.$router.push({
          path: "/login",
        });
      } else {
        if (name == "赛项资源") {
          this.$router.push({
            name: "resourcesDetails",
            params: { row: item },
          });
          return false;
        }
        if (name == "技能培训") {
          this.$router.push({
            name: "skills",
            params: { row: item },
          });
          return false;
        }
        if (name == "1+X证书资源") {
          this.$router.push({
            name: "oneXbook",
            params: { row: item },
          });
          return false;
        }
        if (name == "金职大讲堂") {
          this.$router.push({
            name: "course",
            params: { row: item },
          });
          return false;
        }
        if (name == "行业资源") {
          this.$router.push({
            name: "industry",
            params: { row: item },
          });
          return false;
        }
        // this.hanldePermissionVerification(item, name);
      }
    },
    async handleGetResourceList() {
      let { data } = await getResourceList();
      if (data.code == STATUS_CODE_OK) {
        const sortOrder = [
          "赛项资源",
          "1+X证书资源",
          "技能培训",
          "行业资源",
          "金职大讲堂",
        ];
        this.isPageShow = true;
        this.homeData = data.data;
        this.homeData.sort((a, b) => {
          const indexA = sortOrder.indexOf(a.name);
          const indexB = sortOrder.indexOf(b.name);

          if (indexA === -1) {
            // 如果 a.name 不在 sortOrder 中，放在最后
            return 1;
          }

          if (indexB === -1) {
            // 如果 b.name 不在 sortOrder 中，放在最后
            return -1;
          }

          // 按 sortOrder 中的顺序比较
          return indexA - indexB;
        });
      }
    },
  },
  components: {
    MBlockTitle,
    // MLeftFiexdBox,
    MRightFiexdBox,
    ChatBot,
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .backtop_container .robot.el-popover {
  padding: 0px !important;
}
::v-deep .el-row {
  width: 100% !important;
}
::v-deep .backtop_container .robot.el-popover {
  padding: 0px !important;
}
::v-deep .el-popover--plain {
  padding: 0px !important;
}
.robot {
  position: fixed;
  // bottom: 10px;
  right: -69px;
  z-index: 10;
  ::v-deep .el-popover {
    right: 120px;
    bottom: 0px;
  }
}
.wrap {
  position: relative;
  background-color: $bg-color;
  .banner-wrap {
    position: relative;
    height: 470px;
    display: flex;
    align-items: center;
    .banner {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // object-fit: cover;
      z-index: 1;
    }
  }

  .course-wrap {
    position: relative;
    padding: 0px 0 40px 0;
    .container {
      .nowrap {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
      }
      .detail-box {
        background: #fff;
        margin-top: 10px;
        box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.04);
        border-radius: 10px 10px 10px 10px;
        .box-img {
          width: 100%;
          height: 150px;
          padding: 10px;
          border-radius: 10px 10px 10px 10px;
        }
        .box-content {
          box-sizing: border-box;
          padding: 10px;
          .title {
            padding: 10px 0px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 16px;
          }
          .sign {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .pe-num {
              color: #ff9500;
            }
            .date {
              color: #737980;
            }
          }
        }
      }
    }
  }
}
.swiper-container {
  width: 100%;
  height: 470px;
  position: relative;
}

.swiper-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  max-width: 60%;
}

.swiper-button-next,
.swiper-button-prev {
  color: white;
}
</style>
<style type="text/css">
.swiper-pagination-bullet {
  border-radius: 2px !important;
  width: 60px !important;
  height: 4px !important;
  background: #1968FA !important;
}
</style>
